<!-- 热梗小案例 -->
<template>
	<view>
		<view class="wrapper">
			<view class="title">近期热梗</view>
			<view class="box">
				<view class="item" v-for="(item,index) in list" :key="item.id">
					<view class="name">{{index+1}}. {{item.title}}</view>
					<view class="del" @click="delItem(index)">
						❎
					</view>
				</view>
				<view class="total">共{{list.length}}条梗</view>
				<view class="input-wrapper">
					<input v-model="content" placeholder="请输入热梗..."  placeholder-style="color:#3d5271" />
					<button type="primary" @click="submit">发布</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {ref} from 'vue'
	const content = ref('')
	const list = ref([
		{id:1,title:'再见了妈妈今晚我就要远航'},
		{id:2,title:'元芳，你怎么看？'},
		{id:3,title:'天气升温了，我们也会吗?'},
	])
	//删除
	const delItem = (index)=>{
		list.value.splice(index,1)
	}
	//发布
	const submit = ()=>{
		list.value.push({
			id:list.value.length + 1,
			title:content.value
		})
		content.value = ''
	}
</script>

<style  lang="scss">
.wrapper{
	margin-top: 30rpx;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	.title{
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
	}
	.box{
		margin-top: 30rpx;
		box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
		 .item{
			 display: flex;
			 justify-content: space-between;
			 padding: 30rpx;
			 border: 1rpx solid #f6f6f6;
		 }
		 .total{
			 color: #878988;
			 margin: 30rpx 0;
			 text-align: center;
		 }
		 .input-wrapper{
			 margin-bottom: 30rpx;
			 padding: 0 20rpx;
			 display: flex;
			 justify-content: center;
			 input{
				 width: 460rpx;
				 height: 60rpx;
				 background: #f4f4f4;
				 padding: 0 10rpx;
			 }
			 button{
				 width: 140rpx;
				 height: 60rpx;
				 text-align: center;
				 line-height: 60rpx;
				 color: #fff;
				 font-size: 20rpx;
			 }
		 }
	}
}
</style>
